<%--
  Created by IntelliJ IDEA.
  User: 联想
  Date: 2020/2/20
  Time: 15:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>管理员登陆</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/adminLogin/css/style.css">

    <!--+++++++++++++++++++++++++++++++++++++++++++++++++++++-->

    <script src="${pageContext.request.contextPath}/static/slidingVerification/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/slidingVerification/js/yz.js" type="text/javascript" charset="utf-8"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        button{width: 300px;line-height: 30px;}
        .box {
            margin: 0 auto;
            position: absolute;
            left: 50%;
            top: 50%;
            height: 350px;
            width: 300px;
            margin-left: -150px;
            margin-top: -210px;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: 25px;
            display: none;
            z-index: 2;
        }

        .cuo {
            float: right;
            margin-right: 10px;
            margin-top: 5px;
            cursor: pointer;
        }

        body {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>

    <!--+++++++++++++++++++++++++++++++++++++++++++++++++++++-->

</head>

<body>
<div id="clouds">
    <div class="cloud x1"></div>
    <!-- Time for multiple clouds to dance around -->
    <div class="cloud x2"></div>
    <div class="cloud x3"></div>
    <div class="cloud x4"></div>
    <div class="cloud x5"></div>
</div>

<div class="container">

    <div id="login">
        <h1 align="center" style="font-size: 26px;color: black">管理员登陆页面</h1>
        <br>
        <form name="adminLogin" id="adminLogin" method="post" action="${pageContext.request.contextPath}/admin/login" method="get">
            <fieldset class="clearfix">
                <p><span class="fontawesome-user"></span><input type="text" name="adminName" placeholder="账号"></p>
                <!-- JS because of IE support; better: placeholder="Username" -->
                <p><span class="fontawesome-lock"></span><input type="password" name="adminPwd" placeholder="密码"></p>
                <!-- JS because of IE support; better: placeholder="Password" -->
                <p><input class="btn" type="submit" value="Sign In"></p>

                <!--+++++++++++++++++++++++++++++++++++++++++++++++++++++-->

                <div class="box">
                    <br>
                    <img src="${pageContext.request.contextPath}/static/slidingVerification/image/cw.png" class="cuo">

                    <div id="rotateWrap1">
                        <div class="rotateverify-contaniner">
                            <div class="rotate-can-wrap">
                                <canvas class="rotateCan rotate-can" width="200" height="200"></canvas>
                                <div class="statusBg status-bg"></div>
                            </div>
                            <div class="control-wrap slideDragWrap">
                                <div class="control-tips">
                                    <br>
                                    <p class="c-tips-txt cTipsTxt">滑动将图片转正</p>
                                </div>
                                <div class="control-bor-wrap controlBorWrap"></div>
                                <div class="control-btn slideDragBtn">
                                    <i class="control-btn-ico"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <script type="text/javascript">
                    // 加一个div全部 然后设置display：block；
                    $(function () {
                        // 点击按钮
                        $(".btn").click(function () {
                            console.log('123123');
                            $(".box").css("display", "block");
                            $("body").css({ "background": "#807878" });
                            $(".btn").attr("disabled", true);
                        })
                        //    点击x
                        $(".cuo").click(function () {
                            $(".box").css("display", "none");
                            $("body").css("background", "#fff");
                            $(".btn").attr("disabled", false);
                        })
                        //1
                        var myRotateVerify = new RotateVerify('#rotateWrap1', {
                            initText: '滑动将图片转正',//默认
                            slideImage: ['${pageContext.request.contextPath}/static/slidingVerification/image/1.png',
                                '${pageContext.request.contextPath}/static/slidingVerification/image/2.png',
                                '${pageContext.request.contextPath}/static/slidingVerification/image/4.png',
                                '${pageContext.request.contextPath}/static/slidingVerification/image/5.png'],//arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'
                            slideAreaNum: 10,// 误差范围角度 +- 10(默认)
                            getSuccessState: function (res) {//验证通过 返回  true;
                                document.adminLogin.submit();
                                // console.log('例1' + res);
                            }
                        })
                    })
                </script>

                <!--+++++++++++++++++++++++++++++++++++++++++++++++++++++-->

            </fieldset>
        </form>
        <p>@_@<a href="#" class="blue">${adminLoginErrorMsg}</a><span class="fontawesome-arrow-right"></span></p>
    </div> <!-- end login -->

</div>

</body>
</html>
